<script setup lang="ts">

import {ResourceContentVO} from "@/api/resource/content";
import {EventObject, OpenDialogMetaData} from "@/types/web3d";
import {ResourceType} from "@/types/resource";

const props = defineProps<{
  metadata: OpenDialogMetaData
}>()

const resourceList = ref([...(props.metadata?.resourceList || [])])
const currentIndex = ref(0)
const computedIndex = computed(() => Math.min(resourceList.value.length - 1, currentIndex.value))

/** 生成事件 */
const generateEvent = () => {
  return {
    metadata: {
      resourceList: resourceList
    }
  } as EventObject
}
defineExpose({generateEvent})

/** 选择图片 */
const imgSelectRef = ref()
const selectImg = (content: ResourceContentVO) => {
  resourceList.value.push({
    title: content.name,
    url: content.url,
    type: content.type
  } as any)
}

/** 选择视频 */
const videoSelectRef = ref()
const selectVideo = (content: ResourceContentVO) => {
  resourceList.value.push({
    title: content.name,
    url: content.url,
    type: content.type
  } as any)
}

/** 选择音频 */
const audioSelectRef = ref()
const selectAudio = (content: ResourceContentVO) => {
  resourceList.value.push({
    title: content.name,
    url: content.url,
    type: content.type
  } as any)
}

</script>

<template>
  <div class="w-full">
    <el-row :gutter="16">
      <el-col :span="8">
        <ContentWrap class="h-full">
          <el-tree
            :data="resourceList"
            draggable
            :allow-drop="(draggingNode, dropNode, type) => type !== 'inner'"
            :props="{
              label: (data) => `${resourceList.findIndex((item) => item === data) + 1}). ${data.title}`,
              class: 'border-y-4 border-indigo-500',
            }"
            @node-click="(data) => currentIndex = resourceList.findIndex((item) => item === data)"
          />
        </ContentWrap>
      </el-col>
      <el-col :span="16">
        <ContentWrap>
          <div>
            <el-button type="primary" @click="imgSelectRef.open()">添加图片</el-button>
            <el-button type="primary" @click="videoSelectRef.open()">添加视频</el-button>
            <el-button type="primary" @click="audioSelectRef.open()">添加音频</el-button>
          </div>
          <div class="mt-4" v-if="resourceList.length > 0">
            <el-form>
              <el-form-item style="margin-bottom: 16px" label="标题">
                <el-input v-model="resourceList[computedIndex].title" />
              </el-form-item>
              <el-form-item style="margin-bottom: 16px" label="资源">
                <div>
                  <el-image
                    v-if="resourceList[computedIndex].type === ResourceType.IMG"
                    :src="resourceList[computedIndex].url"
                    class="h-80 object-cover"
                  />
                  <video
                    v-else-if="resourceList[computedIndex].type === ResourceType.VIDEO"
                    :src="resourceList[computedIndex].url"
                    class="h-80 object-cover"
                    controls
                  ></video>
                  <audio
                    v-else-if="resourceList[computedIndex].type === ResourceType.AUDIO"
                    :src="resourceList[computedIndex].url"
                    class="w-120"
                    controls
                  ></audio>
                </div>
              </el-form-item>
              <el-form-item label="内容">
                <el-input
                  v-model="resourceList[computedIndex].content"
                  type="textarea"
                  autosize
                />
              </el-form-item>
            </el-form>
          </div>
        </ContentWrap>
      </el-col>
    </el-row>
  </div>

  <ResourceContentImgSelect ref="imgSelectRef" @selected="selectImg" />
  <ResourceContentVideoSelect ref="videoSelectRef" @selected="selectVideo" />
  <ResourceContentAudioSelect ref="audioSelectRef" @selected="selectAudio" />
</template>

<style scoped lang="scss">

</style>
